<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地鼠游戏</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f4f4f4;
    }

    h1 {
      margin: 20px;
    }

    .game-board {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-gap: 10px;
      justify-content: center;
    }

    .cell {
      width: 100px;
      height: 100px;
      perspective: 1000px;
      cursor: pointer;
    }

    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s;
    }

    .cell.flipped .card {
      transform: rotateY(180deg);
    }

    .front, .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      border: 2px solid #007bff;
      border-radius: 5px;
    }

    .front {
      background-color: #9cdbff;
    }

    .back {
      background-color: #fff;
      transform: rotateY(180deg);
    }

    .mole {
      width: 80px;
      height: 80px;
      background: url('mole.png') center/cover no-repeat;
    }

    .hole {
      width: 80px;
      height: 80px;
      background: url('hole.png') center/cover no-repeat;
    }

    #message {
      font-size: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <h1>地鼠游戏</h1>
  <div class="game-board" id="gameBoard"></div>
  <p id="message"></p>

  <audio id="correctSound" src="correct.mp3" preload="auto"></audio>
  <audio id="wrongSound" src="wrong.mp3" preload="auto"></audio>

  <script>
    const gameBoard = document.getElementById('gameBoard');
    const message = document.getElementById('message');
    const correctSound = document.getElementById('correctSound');
    const wrongSound = document.getElementById('wrongSound');

    let molePosition;

    // 初始化游戏
    function initializeGame() {
      // 创建 3x3 格子
      for (let i = 0; i < 9; i++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.dataset.index = i; // 存储格子索引

        const card = document.createElement('div');
        card.classList.add('card');

        const front = document.createElement('div');
        front.classList.add('front');
        front.textContent = '?';

        const back = document.createElement('div');
        back.classList.add('back');

        card.appendChild(front);
        card.appendChild(back);
        cell.appendChild(card);

        cell.addEventListener('click', () => handleClick(cell, i));
        gameBoard.appendChild(cell);
      }
      spawnMole();
    }

    // 随机生成地鼠的位置
    function spawnMole() {
      molePosition = Math.floor(Math.random() * 9); // 0-8 的随机数
      const cells = document.querySelectorAll('.cell');
      cells.forEach(cell => {
        cell.classList.remove('flipped');
        cell.querySelector('.back').innerHTML = ''; // 清除地鼠或洞图片
      });
      message.textContent = `地鼠在格子 ${Math.floor(molePosition / 3) + 1} 行 ${molePosition % 3 + 1} 列！`;
    }

    // 处理格子的点击事件
    function handleClick(cell, index) {
      if (cell.classList.contains('flipped')) return; // 已翻开的格子不能再点击

      cell.classList.add('flipped');
      const back = cell.querySelector('.back');

      if (index === molePosition) {
        correctSound.play();
        message.textContent = '恭喜！你打到地鼠了！';
        back.innerHTML = '<div class="mole"></div>';
        setTimeout(spawnMole, 1000); // 1秒后重新生成地鼠
      } else {
        wrongSound.play();
        message.textContent = '哎呀，没打到地鼠！';
        back.innerHTML = '<div class="hole"></div>';
      }
    }

    // 初始化游戏
    initializeGame();
  </script>

</body>
</html>
